/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 

	<view class="container">
		<view class="logistics-wrap"  v-if="logistics">
			<view @tap="clearMessage" class="logistics-empty">清空</view>
			<block v-for="(item,index) in logistics" :key="index">
				<view class="logistics_mesg">
					<view class="logistics_items">
						<text class="logistics_time">
							{{item.send_time}}
						</text>
						<view class="mesg_cont">
							<text class="logistics_name">
								{{item.message_title}}<text class="logistics_icon" v-if="item.is_see==0"></text>
							</text>
							<view class="logistics_span">
								<view class="logistics_em">
									<view class="logistics_b"> {{item.message_content}} </view>
									<view class="logistics_i">订单编号: {{item.order_sn}}</view>
								</view>
							</view>
							<view @tap="goDetail" class="logistics_a" :data-idx="index" style="background:url(common/yr.png) center right no-repeat;background-size:8px 14px;">
								查看详情 </view>
						</view>
					</view>
				</view>
			</block>

		</view>
		<!-- 无消息 -->
		<view v-if="!logistics||logistics.length==0">
			<no-data ></no-data>
		</view>
	</view>


</template>

<script>
	import NoData from "@/components/nodata/nodata.vue";
	import common from "@/common/common.js";
	import {getMessageLogistics,putMessageSee,delMessage} from "@/api/api.js";
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				
				loginInfo:"",
				
				logistics:[],
				params:{
					p:1,
				},
				total:'',
			};
		},
		components:{
			NoData
		},
		computed: {
			...mapState(['hasLogin'])
		},
		onLoad(){
			// this.getMessageActivity(this.params)
		},
		onShow(){
			
			if(this.hasLogin){
				this.getMessageLogistics(this.params)
			}else{
				common.toast("none","请登录",2000)
				
			}
		},
		methods:{
			/*物流*/ 
			getMessageLogistics(params){
				getMessageLogistics(params).then(res=>{
					console.log(res)
					res.records.forEach((i,index)=>{
						let timer=common.format(i.send_time,"yyyy-MM-dd hh:mm:ss")
						i.send_time=timer
					})
					this.logistics=this.logistics.concat(res.records);
					
					this.total=res.total;
				})
			},
			/*消息已读*/
			putMessageSee(rec_id){
				putMessageSee(rec_id).then(res=>{
					console.log(res)
					if(res.status==1){
						this.params.p=1;
						this.getMessageLogistics(this.params)
					}
				})
			},
			/*清空消息*/
			delMessage(params){
				delMessage(params).then(res=>{
					console.log(res)
					if(res.status==1){
						this.params.p=1;
						this.getMessageLogistics()
					}
				})
			},
			/*清空*/
			clearMessage(){
				let params={ // category  0通知消息,1活动消息,2物流,3私信
					category:2,
				}
				var that = this;
				uni.showModal({
					title: '确定清空全部消息！',
					cancelText: '取消',
					confirmText: '确定',
					success: function (res) {
						if (!res.confirm) {
							return;
						}
						that.delMessage(params)
					}
				});
				
			},
			/*查看详情*/ 
			goDetail(e){
				console.log(e)
				var idx=e.currentTarget.dataset.idx;
				var item=this.logistics[idx]
				
				this.putMessageSee(item.rec_id)
				if(item.type==4){ //待评价跳转
					uni.navigateTo({
						url:"/pages/user/comment/comment"
					})
					return 
				}
				uni.navigateTo({
					url:'/pages/user/order_detail/order_detail?order_sn='+item.order_sn
				})
				
			},
			
			onReachBottom(){//下拉加载数据
				if(this.logistics.length===this.total){
					common.toast("none","加载完了",2000)
					 return false;
				}
				this.params.p++;
				if(this.hasLogin){
					this.getMessageLogistics(this.params)
				}
				
				
			},
		}
	}
</script>

<style lang="scss">
	.logistics_mesg {
		width: 100%;
		height: auto;
	}

	.logistics_mesg:last-of-type {
		padding-bottom: 60rpx;
	}

	.logistics_items {
		width: 92%;
		padding: 0 4%;
	}

	.logistics_time {
		display: block;
		height: 66rpx;
		line-height: 66rpx;
		padding-top: 18rpx;
		font-size: 24rpx;
		color: #666;
		font-weight: normal;
		text-align: center;
	}

	.mesg_cont {
		width: 94%;
		background-color: #fff;
		border: 1 rpx solid #f3f3f3;
		border-radius: 10rpx;
		padding: 30rpx 3% 0;
		text-align: left;
	}

	.logistics_name {
		display: block;
		font-size: 30rpx;
		color: #333;
		position: relative;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding-right: 30rpx;
	}

	.logistics_icon {
		width: 18rpx;
		height: 18rpx;
		background-color: #ff3b3b;
		border-radius: 50%;
		position: absolute;
		right: 6rpx;
		top: 6rpx;
	}

	.logistics_span {
		display: block;
		margin: 24rpx 0;
		overflow: hidden;
	}

	.logistics_em {
		width: 80%;
		font-size: 24rpx;
		float: left;
	}

	.logistics_b {
		color: #333;
		line-height: 36rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.logistics_i {
		display: block;
		color: #999;
		margin-top: 30rpx;
	}

	.logistics_img {
		width: 96rpx;
		height: 96rpx;
		float: right;
	}

	.logistics_a {
		display: block;
		width: 100%;
		height: 66rpx;
		line-height: 66rpx;
		color: #999;
		font-size: 24rpx;
		border-top: 1rpx solid #f3f3f3;

	}

	.logistics-wrap {
		position: relative
	}

	.logistics-empty {
		position: absolute;
		color: #666666;
		font-size: 24rpx;
		right: 30rpx;
		top: 25rpx;
		line-height: 26rpx;
		border: 1rpx solid #f3f3f3;
		border-radius: 10rpx;
		padding: 6rpx;

	}

	
</style>
